<template>
  <div class="squareIndex">
    <div
      class="Home-top-item flex flex-column flex-justify-center"
      :style="squareData.bg"
    >
      <div class="title">{{squareData.text}}</div>
      <div>{{squareData.explanation}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'squareIndex',
  props: {
    squareData: Object
  },

  data () {
    return {}
  },
  computed: {},
  created () {},
  mounted () {},
  watch: {},
  methods: {},
  components: {}
}
</script>

<style scoped lang="less">
.squareIndex {
  width: 22%;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
  .Home-top-item {
    width: 100%;
    height: 150px;
    // padding: 30px 15px 30px 40px;
    text-align: center;
    .title {
      font-size: 28px;
      font-weight: bolder;
      margin-bottom: 15px;
    }
  }
}
// .Home-top-item:nth-child(1) {

// }

// .Home-top-item:nth-child(2) {
//   background: url("../../assets/images/home-top-item-icon2.png") 85% center no-repeat,
//     linear-gradient(to right, rgb(200, 156, 87), rgb(228, 198, 146));
// }

// .Home-top-item:nth-child(3) {
//   background: url("../../assets/images/home-top-item-icon4.png") 85% center no-repeat,
//     linear-gradient(to right, rgb(94, 168, 155), rgb(123, 221, 205));
// }

// .Home-top-item:nth-child(4) {
//   background: url("../../assets/images/home-top-item-icon3.png") 85% center no-repeat,
//     linear-gradient(to right, rgb(145, 161, 99), rgb(201, 215, 163));
// }
</style>
